@include('Home.head')
<link rel="stylesheet" href="{{ URL::asset('css/home/layui.css') }}">
<body>
<div class="container" id="app">
    @include('Home.member.header')
    <div class="my-nav-bar">
    	<ol class="am-breadcrumb">
          <li><a href="/home/member/index">首页</a></li>
          <li><a href="">交易记录</a></li>
        </ol>
    </div>
    {{--<div class="my-nav-bar">--}}
        {{--<center>--}}
        {{--<ol class="am-breadcrumb">--}}
            {{--<li><a href="" style="font-size: 18px;color:red;">奖励总额：@{{ recordNum }}元</a></li>--}}
        {{--</ol>--}}
        {{--</center>--}}
    {{--</div>--}}

    {{--<div class="flow-default am-cf cart-panel" id="LAY_demo1" v-on:click='detail()'>--}}

    <div class="flow-default am-cf cart-panel" id="LAY_demo1" >
    	{{--<div class="withdrawals-panel" v-for="val in order">--}}

            {{--<div class="uchome-info-uimg" style="width: 20%" >--}}
                {{--<img src="/img/home/user/img1.jpg" style="width: 50px;height: 50px;margin: 14px"/>--}}
            {{--</div>--}}
            {{--<div class="groupby-info-panle" style="width: 28%">--}}
                {{--<h2><a href="#">@{{ val.money }}</a></h2>--}}
            {{--</div>--}}
            {{--<div class="groupby-info-panle" style="width: 52%">--}}
                {{--<h3><a href="#">@{{ val.explain }}</a></h3>--}}
                {{--<p>订单号：@{{ val.ordersn }}</p>--}}
                {{--<p>交易时间：@{{ val.time }}</p>--}}
                {{--<p v-show="val.remark">备注：@{{ val.remark }}</p>--}}
            {{--</div>--}}
        {{--</div>--}}
    </div>
    @include('Home.foot')
</div>
</body>
<script src="{{ URL::asset('js/admin/layui/layui.js') }}"></script>
<script>
    layui.use('flow', function(){
        var flow = layui.flow;
        flow.load({
            elem: '#LAY_demo1' //流加载容器
            // ,scrollElem: '#LAY_demo1' //滚动条所在元素，一般不用填，此处只是演示需要。
            ,done: function(page, next){ //执行下一页的回调
                //模拟数据插入
                setTimeout(function(){
                    var lis = [];
                    var order = app.order;
                    app.nextData();
                    for(var i = 0; i < app.order.length; i++){
                        imgSrc ='';
                        if(app.order[i].type==1){
                            imgSrc ='/img/home/user/1.png';
                        } else if(app.order[i].type==2){
                            imgSrc ='/img/home/user/2.png';
                        }else if(app.order[i].type==3){
                            imgSrc ='/img/home/user/3.png';
                        }else if(app.order[i].type==4){
                            imgSrc ='/img/home/user/4.png';
                        }else if(app.order[i].type==5){
                            imgSrc ='/img/home/user/5.png';
                        }else if(app.order[i].type==6){
                            imgSrc ='/img/home/user/kan.png';
                        }else if(app.order[i].type==7){
                            imgSrc ='/img/home/user/7.jpg';
                        }else if(app.order[i].type==8){
                            imgSrc ='/img/home/user/5.jpg';
                        }
                        lis.push(
                            "<div class='withdrawals-panel' data-id="+order[i].id+" data-index="+order[i].type+">"+
                            "<div class='uchome-info-uimg'   style='width: 20%' >"+
                            " <img src="+imgSrc+" style='width: 50px;height: 50px;margin: 14px'/>"+
                            "</div>"+
                            "<div class='groupby-info-panle' style='width: 28%'>"+
                            "<h2><a >"+order[i].money+"</a></h2>"+
                            "</div>"+
                            "<div class='groupby-info-panle' style='width: 52%'>"+
                            "<h3><a>"+order[i].explain+"</a></h3>"+
                            "<p>订单号："+order[i].ordersn+"</p>"+
                            "<p>交易时间："+order[i].created_at+"</p>"+
							// "<p v-show='"+order[i].type+"==5'>查看详细</p>"+
                            "</div>"
                            +"</div>"
                        )
                    }
                    //执行下一页渲染，第二参数为：满足“加载更多”的条件，即后面仍有分页
                    //pages为Ajax返回的总页数，只有当前页小于总页数的情况下，才会继续出现加载更多
                        next(lis.join('') , page <= app.pages.last_page); //假设总页数为 10
                        $('.withdrawals-panel').click(function(){
                            // console.log(this.getAttribute('data-id'));
                            var id = this.getAttribute('data-id');
                            var Ntype = this.getAttribute('data-index');
                            if(Ntype == 5){
                                window.location.href="/home/member/recordDetail?id="+id;
                            }else if(Ntype == 8){
								window.location.href="/home/member/recordDetail?id="+id;
							}
                        });

                }, 500);
            }
        });
    });

    var app = new Vue({
        el: "#app",
        data: {
            title: '交易记录',
            order:{
            },
            recordNum:'',
            pages:{
                current_page:0,
            },
        },
        methods: {

            //初始化
            initialize: function () {
                var rico = this
                $.post("/home/member/record", {'_token': '{{csrf_token()}}',class:'select'}, function (res) {
                    if (res.code) {
                        app.pages = res.data;
                        app.order = res.data.data;
                        app.recordNum = res.recordNum;
                        for(var i=0;app.order.length>i;i++){
                            app.order[i].time = rico.formatDateTime(app.order[i].time)

                        }
                    } else {
                        layer.msg(res.data);
                    }
                });
            },
            formatDateTime:function (timeStamp) {
                var date = new Date();
                date.setTime(timeStamp * 1000);
                var y = date.getFullYear();
                var m = date.getMonth() + 1;
                m = m < 10 ? ('0' + m) : m;
                var d = date.getDate();
                d = d < 10 ? ('0' + d) : d;
                var h = date.getHours();
                h = h < 10 ? ('0' + h) : h;
                var minute = date.getMinutes();
                var second = date.getSeconds();
                minute = minute < 10 ? ('0' + minute) : minute;
                second = second < 10 ? ('0' + second) : second;
                return y + '-' + m + '-' + d+' '+h+':'+minute+':'+second;
            },

            //下一页
            nextData:function(){
                //page:app.pages.per_page+1
                var rico = this
                $.get("/home/member/record", {'_token': '{{csrf_token()}}',class:'select',page:app.pages.current_page+1
                }, function (res) {
                    if (res.code) {
                        app.pages = res.data

                        app.order = res.data.data
                        for(var i=0;app.order.length>i;i++){
                            app.order[i].time = rico.formatDateTime(app.order[i].time)

                        }
                    } else {
                        layer.msg(res.data);
                    }
                });
            },

            pag:function () {
                $.post("/home/member/myorder", {'_token': '{{csrf_token()}}',class:'select'}, function (res) {
                    if (res.code) {
                        app.order = res.data.data
                    } else {
                        layer.msg(res.data);
                    }
                });
            },
            pay:function (id) {
                window.location.href="/home/orderpage?id="+id;
            },


            //订单详情
            orderComm:function (id) {
                window.location.href="/home/ordercomment?id="+id;
            },
            formatDateTime:function (timeStamp) {
                var date = new Date();
                date.setTime(timeStamp * 1000);
                var y = date.getFullYear();
                var m = date.getMonth() + 1;
                m = m < 10 ? ('0' + m) : m;
                var d = date.getDate();
                d = d < 10 ? ('0' + d) : d;
                var h = date.getHours();
                h = h < 10 ? ('0' + h) : h;
                var minute = date.getMinutes();
                var second = date.getSeconds();
                minute = minute < 10 ? ('0' + minute) : minute;
                second = second < 10 ? ('0' + second) : second;
                return y + '-' + m + '-' + d+' '+h+':'+minute+':'+second;
            },
            //详细记录
            detail:function(e){
                location.href = "/home/member/recordDetail";
            }
        },

        //自动执行
        mounted: function () {
            this.initialize();
        },
    })
</script>
</html>
